<template>
  <div class="introduction">
    <layout>
      <x-body slot="body">
        <container>
          <img src="static/images/introduction/banner.jpg" class="mb20">
          <img src="static/images/introduction/laozong.jpg" class="mb20 bb1">
          <div class="textZw mb20 bb1">
            <h3>城市更新与幸福生活服务商</h3>
            <p>福星惠誉控股有限公司成立于2001年，是中国A股上市公司湖北福星科技股份有限公司（证券代码：000926）的全资子公司。公司核心业务涵盖住宅开发、商业及物业经营管理、产城融合、生态农业、文旅产业等领域。</p>
            <p>创立以来，秉承“先做人，后做事”的经营理念和“为政府分忧，为百姓造福”的开发宗旨，福星惠誉顺应行业发展潮流，积极推动城市的更新进步,为满足人民对幸福生活的追求提供了全方位的优质服务，逐步成长为中国一流的“城市更新与幸福生活服务商”。近年，公司开始了以“强化核心优势、聚焦重点区域、深化全国布局、完善产业生态、做大资本平台”为核心的战略转型，标志着公司发展迈入新阶段。</p>
            <p>城市更新领域，公司始终聚焦中国经济最具活力的核心经济圈及中西部重点城市群，在规划设计、土地整理、基础设施、商业配套、物业服务、产城融合等领域全方位为中国的城市更新提供科学系统的解决方案。已累计投入城市更新改造资金过千亿元，完成更新改造面积超过2000万平方米，相继推出了福星惠誉•国际城、福星惠誉•水岸星城、福星惠誉•东湖城等一批标志性的品牌项目。公司从2005年起，连续入选中国房地产百强企业，位列武汉市房地产企业综合实力前茅。先后被中国房地产指数研究院评为“中国房地产城中村旧城改造专业领先品牌价值TOP10” 、“中国房地产城市更新综合开发专业领先品牌价值TOP10”。</p>
            <p>在商业开发和产城融合领域，福星惠誉发挥优势、勇于创新，打造出群星城、福莱中心、光谷总部国际等一批标杆项目，实现了创新成长。目前，公司已在“京津冀都市圈”、“长三角经济圈”、“珠三角经济圈”、“成渝经济圈”、“长江中游城市群”等区域完成了全国化的布局构架，并成功开拓美国、澳洲等海外市场。</p>
            <p>作为一个品牌企业，福星惠誉一直积极承担社会责任，致力于乡村振兴、绿色环保、教育扶贫、抢险救灾等公益活动，先后荣获“湖北省爱心慈善奖”、“中华慈善突出贡献单位（企业）奖”等多项公益大奖。</p>
            <p>展望未来，公司将继续坚持以经营目标为中心，以创新发展为引领，以品质品牌为根本，以效益效率为主线，以团队建设为保障，持续创造高品质的增长，实现企业的繁荣常盛。公司力争在新的五年规划期内，成为中国领先的“城市更新与幸福生活服务商”。</p>
            <img src="static/images/introduction/ditu.jpg">
          </div>
          <div class="textZw mb20 bb1">
            <h3>核心优势</h3>
            <h4>一、城中村旧城改造专家</h4>
            <p>福星惠誉坚持“立足城中村旧城改造，以精品名盘为基础，打造房地产全国知名品牌”的发展战略，在“旧城改造”、“城中村改造”和“建造城市中心区高档住宅”等方面，经过多年的探索和实践，形成了“城市核心区运营”的独家风格和综合专业实力优势。</p>
            <img src="static/images/introduction/tu1.jpg" class="mb30">
            <h4>二、城市更新综合开发专业领先品牌</h4>
            <p>福星惠誉从单一住宅开发到商业地产开发再到城市综合体的建设，通过产品结构的多元化提升公司整体运营水平和综合开发实力，已经成为中国一流的城市运营商。福星惠誉每到一片区域，都能从容不迫地挖掘、提升这片土地的潜在价值，推进城市的更新进步，将其潜力发挥到极至，并打造出城市精英们梦想中的栖居之地、城市中心区更新的地标综合体。</p>
            <p>公司相续推出了福星惠誉•国际城、福星惠誉•水岸国际等一流城市综合体，其中水岸国际项目荣获“2012-2013中国百城建筑新地标”。由于在综合开发运营方面积累了丰富的经验和强大实力，先后获得了“中国房地产城市核心运营专业领先品牌TOP10”、“中国房地产综合开发专业领先品牌价值TOP10”。</p>
            <img src="static/images/introduction/tu2.jpg" class="mb30">
            <h4>三、产城融合领域勇于创新的排头兵</h4>
            <p>产城融合是在我国转型升级的背景下相对于产城分离提出的一种发展思路。要求产业与城市功能融合、空间整合，"以产促城，以城兴产，产城融合"。福星惠誉审时度势，主动适应中国经济发展新常态，深入实施国家区域发展总体战略、主体功能区战略和新型城镇化战略，顺应国际、国内产业发展和城镇化发展新趋势，进一步发挥自身在城市综合开发和产业地产运营方面的核心优势，先行先试、勇于创新，向综合型城市经济转型，促进产城融合发展，提高资源利用效率，改善生态环境质量。</p>
            <p>公司在促进产业集聚、加快产业发展的同时，顺应发展规律，因势利导，按照产城融合发展的理念，加快支持一批地区产业园区从单一的生产型园区经济向综合型城市经济转型，为新型城镇化探索路径，发挥先行先试的示范带动作用。近些年创新开发模式，相继开发武汉中小企业城、海峡创业城、国际企业中心、光谷总部国际、未来之光等项目。未来十年，公司力争建设一批产业发展基础较好、城市服务功能完善、边界相对明晰的城市综合功能区，让福星惠誉成为产城融合领域的专业领先品牌。</p>
            <img src="static/images/introduction/tu3.jpg">
          </div>
          <div class="list" v-if="items.length<0">
            <img v-for="(item, index) in items" :key="'item-'+index" :src="item">
          </div>
          <div class="video">
            <div class="video-title">
              <h3>福星视频</h3>
            </div>
            <div class="video-panel" v-for="(item,index) in list" :key="'ivideo'+index">
              <container>
                <div class="title">{{item.vTitle}}</div>
                <!-- <div class="v-wrapper" v-html="item.vSrc"></div> -->
                <div class="v-wrapper">
                  <video
                    controls="controls"
                    playsinline
                    webkit-playinline
                    :src="item.zSrc"
                    :poster="item.pSrc"
                    width="100%"
                    :key="'video'+index"
                  ></video>
                </div>
              </container>
            </div>
          </div>
          <img src="static/images/introduction/logo.png" class="logo">
        </container>
        <footnav></footnav>
      </x-body>
    </layout>
  </div>
</template>

<script>
import axios from 'axios'
import {
  Layout,
  XBody,
  Container,
  Footnav,
  Ptlist,
  Ptlistitem,
  XLink,
  Icon
} from 'components'
import { formatDate } from 'utils/date'
export default {
  name: 'introduction',
  components: {
    Layout,
    XBody,
    Container,
    Footnav,
    Ptlist,
    Ptlistitem,
    XLink,
    Icon
  },
  data() {
    return {
      item: {},
      items: [
        'static/images/introduction/js01.jpg',
        'static/images/introduction/js02.jpg',
        'static/images/introduction/js03.jpg',
        'static/images/introduction/js04.jpg',
        'static/images/introduction/js16.jpg',
        'static/images/introduction/js06.jpg',
        'static/images/introduction/js15.jpg',
        'static/images/introduction/js08.jpg',
        'static/images/introduction/js14.jpg',
        'static/images/introduction/js10.jpg',
        'static/images/introduction/js11.jpg',
        'static/images/introduction/js12.jpg',
        'static/images/introduction/js13.jpg'
        // 'static/images/introduction/js05.jpg',
        // 'static/images/introduction/js07.jpg',
        // 'static/images/introduction/js09.jpg'
      ],
      list: [
        {
          vTitle: "福星惠誉企业品牌宣传片",
          pSrc: "static/images/cover1.png",
          zSrc: "http://cdn.juzhen.net/2018/fxhysource/introduce2018v2.mp4"
        },
        // {
        //   vTitle: '福星惠誉大爱武汉宣传片',
        //   pSrc: 'static/images/cover2.png',
        //   zSrc:'http://cdn.juzhen.net/2018/fxhysource/imagev2.mp4'
        // },
        {
          vTitle: "福星惠誉大爱武汉5周年回顾",
          pSrc: "static/images/5years.png",
          zSrc: "http://cdn.juzhen.net/2018/fxhysource/5years.mp4"
        }
      ]
    }
  },
  created() {
    //alert(0)
  },
  methods: {},
  filters: {
    formatDate(time) {
      if (time) {
        let date = new Date(time.replace(/-/g, '/'))
        return formatDate(date, 'yyyy-MM-dd')
      }
    }
  }
}
</script>

<style lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss';
.introduction {
  .container{
    padding: 0;
  }
  .textZw{
    background: #fff;
    padding: 0.576rem 0 0 0;
    p{
      padding: 0 0.576rem 1rem 0.576rem;
      font-size: 0.555rem;
      line-height: 0.85rem;
      text-indent: 2em;
      color: #666666;
    }
    h3{
      margin: 0 0 0.64rem 0.576rem;
      color: #16487f;
      font-size: 0.682rem;
      position: relative;
      padding-left: 0.7rem;
      &::before{
        content: '';
        position: absolute;
        top: 10%;
        left: 0;
        width: 0.493rem;
        height: 0.493rem;
        background: #245c9a;
      }
    }
    h4{
      font-size: 0.64rem;
      padding:0 0 0.376rem 0.576rem;
      color: #666666;
      font-weight: 700;
    }
  }
  .list{
      img{
        margin:0 0 0.426rem 0;
        border-bottom: 1px solid #dcdcdc;
      }
  }
  .logo{
    display: block;
    margin: 2rem auto 1.7rem;
    width: 50%;
  }
  .mb20{
    margin: 0 auto 0.426rem;
  }
  .mb30{
    margin: 0 auto 0.64rem;
  }
  .bb1{
    border-bottom: 1px solid #dcdcdc;
  }
}
.video {
  background-color: #fff;
  padding-top: 0.576rem;
  .video-title {
    h3 {
      margin: 0 0 0.64rem 0.576rem;
      color: #16487f;
      font-size: 0.682rem;
      position: relative;
      padding-left: 0.7rem;
      &::before {
        content: "";
        position: absolute;
        top: 10%;
        left: 0;
        width: 0.493rem;
        height: 0.493rem;
        background: #245c9a;
      }
    }
    .icon,
    .text {
      display: inline-block;
    }
    .icon {
      width: 10px;
      height: 10px;
      background: $primary-color;
      margin-right: 5px;
    }
    .text {
      font-size: 16px;
    }
  }
  .video-panel {
    margin: 0 auto 1rem;
    @include _1px;
    .title {
      color: $sub-color;
      font-size: 0.555rem;
      margin: 0 0 0.5rem 0.8rem;
      border-left: 4px solid $sub-color;
      padding-left: 6px;
    }
    .v-wrapper {
      video {
        display: block;
        background: #ccc;
        width: 100%;
      }
    }
  }
}
</style>
